<template>
  <div class="login_container">
    <div class="login_box">
      <!--      头像区域-->
      <div class="avatar_box">
        <img src="../../assets/logo.png" alt="">
      </div>
      <!--      登录表单区域-->
      <div style="height: 100%">
        <el-form ref="registerFormRef" label-width="0px" class="login_form" :model="registerForm" :rules="registerFormRules">
          <!--        用户名-->
          <el-form-item label="" prop="mgName">
            <el-input placeholder="请输入用户名" v-model="registerForm.mgName" prefix-icon="iconfont icon-user"></el-input>
          </el-form-item>
          <!--          密码-->
          <el-form-item label="" prop="mgPwd">
            <el-input placeholder="请输入密码" v-model="registerForm.mgPwd" prefix-icon="iconfont icon-3702mima"
                      type="password"></el-input>
          </el-form-item>
          <!--确认密码-->
          <el-form-item label="" prop="confirmPwd">
            <el-input placeholder="请再次输入密码" type="password" v-model="registerForm.confirmPwd" autocomplete="off" prefix-icon="iconfont icon-3702mima"></el-input>
          </el-form-item>
          <!--          按钮区域-->
          <el-form-item label="" class="btns" style="margin-bottom: 10px">
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="info" @click="resetregisterForm">重置</el-button>
          </el-form-item>
          <!--      注册或者登陆-->
          <div class="elink">
            <el-link type="info" disabled>注册/</el-link>
            <el-link type="primary"  @click="login" :underline="false">登录</el-link>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    // 再次输入密码的校验规则
    var confirmPwdRule = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.mgPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // 登录表单的数据绑定对象
      registerForm: {
        mgName: '',
        mgPwd: '',
        confirmPwd: ''
      },
      // 表单验证规则
      registerFormRules: {
        // 验证用户名是否合法
        mgName: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        // 验证密码
        mgPwd: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        // 再次确认密码
        confirmPwd: [
          { validator: confirmPwdRule, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 点击重置按钮，重置登录表单
    resetregisterForm () {
      this.$refs.registerFormRef.resetFields()
    },
    register () {
      this.$refs.registerFormRef.validate(async (valid) => {
        console.log(this.registerForm)
        if (!valid) return
        const { data: res } = await this.$http.post('regist', this.registerForm)
        console.log(res)
        if (res.status !== 200) return this.$message.error(res.msg)
        this.$message.success('注册成功')
      })
    },
    // 注册页面
    login () {
      this.$router.push('/mLogin')
    }
  }
}
</script>
<!--scoped规定样式只在自己组件内生效-->
<style lang="less" scoped>
  .login_container {
    height: 100%;
    background-color: #2b4b6b;
  }

  .login_box {
    height: 315px;
    width: 300px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-55%, -50%);
    margin-left: 15px;
    .avatar_box {
      height: 70px;
      width: 70px;
      border: 1px solid #eeeeee;
      border-radius: 50%;
      padding: 10px;
      box-shadow: 0 0 10px #dddddd;
      position: absolute;
      transform: translate(100px, -50%);
      background-color: white;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eeeeee;
      }
    }
  }
  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btns {
    display: flex;
    transform: translateX(23%);
  }
  .elink {
    margin-bottom: 10px!important;
    text-align: center;
  }
</style>
